<template>
  <div class="content">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="用户账号">
        <el-input v-model="formInline.account" placeholder="请输入用户账号" clearable />
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="formInline.nickName" placeholder="请输入用户昵称" clearable />
      </el-form-item>
      <el-form-item label="注册时间">
        <datePickerRange v-model:start="formInline.startTime" v-model:end="formInline.endTime" type="datetimerange"></datePickerRange>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.records" @selection-change="handleSelectionChange" :stripe="true" border>
      <el-table-column label="头像" min-width="100" align="center">
        <template #default="scope">
          <el-avatar :size="60" :src="scope.row.image" />
        </template>
      </el-table-column>
      <el-table-column prop="account" label="账号" min-width="180" align="center" />
      <el-table-column prop="nickName" label="昵称" min-width="150" align="center" />
      <el-table-column prop="realName" label="真实姓名" min-width="200" align="center" />
      <el-table-column prop="age" label="年龄" align="center">
        <template #default="scope">
          {{scope.row.age&&scope.row.age.length>1?proxy.$utils.getAge(scope.row.age):null}}
        </template>
      </el-table-column>
      <el-table-column label="用户类型" min-width="180" align="center">
        <template #default="scope">
          {{scope.row.type==0?"个人":"公司"}}
        </template>
      </el-table-column>
      <el-table-column label="是否实名" align="center">
        <template #default="scope">
          {{scope.row.isReal==0?"未实名":"已实名"}}
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template #default="scope">
          {{scope.row.isReal==0?"男":"女"}}
        </template>
      </el-table-column>
      <el-table-column prop="source" label="来源" align="center" />
      <el-table-column prop="gmtCreate" label="注册时间" align="center" min-width="180" />
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template #default="scope">
          <el-button type="primary" text @click="seeDetail(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-backtop :right="100" :bottom="100" />

    <el-dialog v-model="dialogVisible" title="用户详情" width="700" :before-close="beforeClose">
      <el-descriptions title="" :column="1" border class="descriptions120">
        <el-descriptions-item label="头像">
          <el-avatar :size="60" :src="info.image" />
        </el-descriptions-item>
        <el-descriptions-item label="账号">{{info.account}}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{info.nickName}}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{info.realName}}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{info.age}}</el-descriptions-item>
        <el-descriptions-item label="用户类型">{{info.type==0?"个人":"公司"}}</el-descriptions-item>
        <el-descriptions-item label="是否实名">{{info.isReal==0?"未实名":"已实名"}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{info.isReal==0?"男":"女"}}</el-descriptions-item>
        <el-descriptions-item label="来源">{{info.source?info.source:"APP"}}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{info.gmtCreate}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  account: null,
  nickName: null,
  startTime: "",
  endTime: "",
});
let tableData = ref({});
let selectArr = ref([]);
let dialogVisible = ref(false);
let info = ref({});

onMounted(() => {
  search();
});
let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.appUser(formInline.value);
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    account: null,
    nickName: null,
    startTime: "",
    endTime: "",
  };
  getInfo();
};
const handleSelectionChange = (val: User[]) => {
  selectArr.value = val;
};
let seeDetail = async (id) => {
  info.value = await proxy.$apis.appDetail({ id });
  console.log("详情", info.value);
  dialogVisible.value = true;
};
let beforeClose = () => {
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
